<template>
  <a-layout id="app-layout-sider">
    <a-layout-sider
      v-model:collapsed="$sideRoute.state.collapsed"
      collapsible
      defaultCollapsed
      theme="light"
      class="layout-sider"
    >
      <div class="user-info">
        <img
          class="user-avatar"
          alt="USER"
          :src="
            'https://q4.qlogo.cn/g?b=qq&nk=2350262486&s=100&t=' + Date.now()
          "
          @click="egg"
        />
        <span class="user-nickName">梁惜台</span>
        <span class="user-tags-container">
          <!-- <img
            class="user-tags"
            src=""
          />-->
          <div v-show="!$sideRoute.state.collapsed">
            <!-- <a-tag class="user-tag user-VIP" title="内测用户身份标识，欢迎您测试使用本软件并反馈您宝贵的意见">内测用户</a-tag>
            <a-tag class="user-tag user-VIP" title="超级用户解锁软件所有权限">超级用户</a-tag>-->
          </div>
        </span>
        <a-divider style="background-color: #f5f5f5; margin: 5px 0" />
      </div>
      <div class="user-menu">
        <a-menu
          class="menu-item"
          theme="light"
          mode="inline"
          v-model:selectedKeys="$sideRoute.state.current"
          @click="menuHandle"
        >
          <a-menu-item-group key="m1">
            <template #title>
              <span v-show="!$sideRoute.state.collapsed">在线音乐</span>
              <!-- <span v-else></span> -->
            </template>
            <a-menu-item v-for="(menuInfo, index) in menu" :key="index">
              <template #title>
                <span>{{ menuInfo.title }}</span>
              </template>
              <mIcon v-if="menuInfo.defaultIcon" :icon="menuInfo.icon" />
              <span>{{ menuInfo.title }}</span>
            </a-menu-item>
          </a-menu-item-group>
          <a-menu-item-group key="m2">
            <template #title>
              <span v-show="!$sideRoute.state.collapsed">我的音乐</span>
              <span v-show="$sideRoute.state.collapsed">
                <div
                  style="height: 1px; background: #dddddd; margin: 15px 0"
                ></div>
              </span>
            </template>
            <a-menu-item v-for="(menuInfo, index) in menu_2" :key="index">
              <template #title>
                <span>{{ menuInfo.title }}</span>
              </template>
              <mIcon v-if="menuInfo.defaultIcon" :icon="menuInfo.icon" />
              <Icon
                v-else-if="
                  !menuInfo.defaultIcon && menuInfo.pageName === 'playlist'
                "
              >
                <template #component>
                  <svg
                    t="1637492038024"
                    class="myIcon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2067"
                  >
                    <path
                      d="M964.608 234.496c-46.08-52.565333-104.789333-93.696-169.642667-118.784a34.030933 34.030933 0 0 0-46.421333 31.744v420.352a178.005333 178.005333 0 0 0-110.933333-38.741333c-98.816 0-179.2 80.384-179.2 179.2S538.794667 887.466667 637.610667 887.466667s179.2-80.384 179.2-179.2c0-1.877333-0.170667-3.754667-0.341334-5.632 0-1.024 0.341333-1.877333 0.341334-2.901334V201.216c36.181333 20.309333 69.12 46.933333 96.597333 78.165333 12.458667 14.165333 34.133333 15.530667 48.128 3.072 14.165333-12.288 15.530667-33.792 3.072-47.957333zM637.610667 819.2c-61.098667 0-110.933333-49.834667-110.933334-110.933333s49.834667-110.933333 110.933334-110.933334 110.933333 49.834667 110.933333 110.933334-49.834667 110.933333-110.933333 110.933333zM185.344 307.2h392.533333c18.773333 0 34.133333-15.36 34.133334-34.133333s-15.36-34.133333-34.133334-34.133334h-392.533333a34.133333 34.133333 0 1 0 0 68.266667zM424.277333 460.8h-238.933333c-18.773333 0-34.133333 15.36-34.133333 34.133333s15.36 34.133333 34.133333 34.133334h238.933333c18.773333 0 34.133333-15.36 34.133334-34.133334s-15.36-34.133333-34.133334-34.133333zM321.877333 682.666667h-136.533333c-18.773333 0-34.133333 15.36-34.133333 34.133333s15.36 34.133333 34.133333 34.133333h136.533333c18.773333 0 34.133333-15.36 34.133334-34.133333s-15.36-34.133333-34.133334-34.133333z"
                      p-id="2068"
                    />
                  </svg>
                </template>
              </Icon>
              <span>{{ menuInfo.title }}</span>
            </a-menu-item>
          </a-menu-item-group>
          <a-menu-item-group key="m3">
            <template #title>
              <span v-show="!$sideRoute.state.collapsed">关于</span>
              <span
                v-show="$sideRoute.state.collapsed"
                style="text-align: center"
              >
                <div
                  style="height: 1px; background: #dddddd; margin: 15px 0"
                ></div>
              </span>
            </template>
            <a-menu-item v-for="(menuInfo, index) in menu_other" :key="index">
              <template #title>
                <span>{{ menuInfo.title }}</span>
              </template>
              <mIcon v-if="menuInfo.defaultIcon" :icon="menuInfo.icon" />
              <span>{{ menuInfo.title }}</span>
            </a-menu-item>
          </a-menu-item-group>
        </a-menu>
      </div>
    </a-layout-sider>

    <a-layout>
      <a-layout-content class="layout-content">
        <!-- vue3.0配置 -->
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component
              :is="Component"
              v-if="$route.meta.keepAlive"
              :key="$route.path"
            />
          </keep-alive>
          <component
            :is="Component"
            v-if="!$route.meta.keepAlive"
            :key="$route.path"
          />
        </router-view>
      </a-layout-content>
      <!-- 底部控制 -->
      <contronl />
    </a-layout>
  </a-layout>
</template>
<script>
import { mIcon } from "./ICON.ts";
import Icon from "@ant-design/icons-vue";
import { notification } from "ant-design-vue";
import { getPlayerConfig } from "@renderer/utils/playerConfig";
import {getEggAvatar} from '@renderer/utils/getEgg'
import contronl from "./contronl.vue";
export default {
  name: "AppSider",
  components: {
    mIcon,
    contronl,
    Icon,
  },
  props: {},
  setup() {
    return {};
  },
  data() {
    return {
      nowKeys: [],
      menu: {
        homeIndex_0: {
          icon: "CustomerServiceOutlined",
          defaultIcon: true,
          title: "播放页",
          menuName: "homeIndex_0",
          pageName: "homeIndex",
          params: {},
        },
        search_0: {
          icon: "SearchOutlined",
          defaultIcon: true,
          title: "音乐库",
          menuName: "search_0",
          pageName: "search",
          params: {},
        },
        rank_0: {
          icon: "BarChartOutlined",
          defaultIcon: true,
          title: "排行榜",
          menuName: "rank_0",
          pageName: "rank",
          params: {},
        },
      },
      menu_2: {
        history_1: {
          icon: "ClockCircleOutlined",
          defaultIcon: true,
          title: "最近播放",
          menuName: "history_1",
          pageName: "history",
          params: {},
        },
        like_1: {
          icon: "HeartOutlined",
          defaultIcon: true,
          title: "我喜欢",
          menuName: "like_1",
          pageName: "like",
          params: {},
        },
        playlist_1: {
          icon: "SearchOutlined",
          defaultIcon: false,
          title: "歌单集",
          menuName: "playlist_1",
          pageName: "playlist",
          params: {},
        },
      },
      menu_other: {
        about_2: {
          icon: "UserOutlined",
          defaultIcon: true,
          title: "关于",
          menuName: "about_2",
          pageName: "about",
          params: {},
        },
      },
    };
  },
  created() {
    const player = getPlayerConfig();
    this.$sideRoute.state.collapsed = player
      ? player.collapsed
      : this.$sideRoute.state.collapsed;
    this.current = [this.$route.name];
  },
  mounted() {
    // this.menuHandle({ key: "homeIndex_0" });
  },
  methods: {
    async egg() {
      const res = await getEggAvatar();
      notification.open({
        message: res.msg?.title,
        duration: res.msg?.duration,
        description:
          res.msg?.content,
        style: {
          whiteSpace: "pre-wrap",
          webkitAppRegion:'no-drag'
        },
        onClick: () => {},
      });
    },
    menuHandle(item) {
      let linkInfo = null;
      const f = parseInt(item.key.split("_")[1]);
      if (f === 0) {
        linkInfo = this.menu[item.key];
      } else if (f === 1) {
        linkInfo = this.menu_2[item.key];
      } else if (f === 2) {
        linkInfo = this.menu_other[item.key];
      }
      this.$router.push({ name: linkInfo.pageName, params: linkInfo.params });
      this.$sideRoute.state.current[0] = linkInfo.pageName;
    },
  },
};
</script>
<style lang="less" scoped>
// 嵌套
#app-layout-sider {
  width: 100%;
  position: absolute;
  top: 56px;
  bottom: 0px;
  left: 0px;
  // border-top: 1px solid#e8eaec;
  .logo {
    border-bottom: 1px solid#e8eaec;
    text-align: center;
  }

  /deep/.ant-menu-light .ant-menu-item-active {
    color: var(--defaultPrimaryColor);
  }

  /deep/ .ant-menu-item-group-title {
    font-size: 13px;
  }

  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .user-menu {
    overflow: auto;
  }

  .user-tags-container {
    margin: 0px 0 2px 0;
    display: flex;
  }

  .user-tags {
    text-align: left;
    width: 24px;
    height: 12px;
    margin-top: -2px;
  }

  .user-tag {
    cursor: pointer;
    border: 1px solid transparent;
    font-size: 11px;
    border-radius: 15px;
  }

  .user-VIP {
    color: #ffffff;
    background-color: rgba(32, 32, 32, 0.897);
  }

  .user-VIP:hover {
    color: rgb(255, 255, 255);
    background-color: var(--defaultPrimaryColor);
  }

  .user-nickName {
    color: #7a7a7a;
    font-size: 13.5px;
  }

  .user-avatar {
    cursor: pointer;
    vertical-align: middle;
    border-radius: 50%;
    height: 56px;
    width: 56px;
    margin: 24px 48px 6px 48px;
    // border: 1px solid #1d1d1d;
  }
  .layout-sider {
    // border-top: 1px solid #e8e8e8;
    border-right: 1px solid #e8eaec;
    // background-color: #2a3733;
  }
  .menu-item {
    .ant-menu-item {
      background-color: #fff;
      margin-top: 0px;
      margin-bottom: 0px;
      padding: 0 0px !important;
      user-select: none;
    }
  }

  /deep/ .ant-layout-sider-children {
    display: flex;
    flex-direction: column;
  }

  /deep/.ant-layout-sider-trigger {
    position: fixed;
    bottom: 7px;
  }

  /deep/ .ant-layout-sider-trigger {
    color: #9e9e9e;
    border-right: 1px solid #e8eaec;
  }

  /deep/ .ant-layout-sider-trigger:hover {
    background-color: rgb(235, 235, 235);
  }

  /deep/.ant-menu-item:hover {
    color: var(--defaultPrimaryColor);
    background-color: var(--defaultPrimaryColorBackground);
    transition: border-color 0.3s, background 0.3s, padding 0.1s;
  }

  .myIcon {
    width: 1.1em;
    height: 1.1em;
    fill: #262626;
    transition: 0.1s;
  }

  /deep/ .ant-menu-item::after {
    border-right: 3px solid var(--defaultPrimaryColor);
  }

  /deep/ .ant-menu-item-selected {
    color: var(--defaultPrimaryColor);
    background-color: var(--defaultPrimaryColorBackground);
  }

  /deep/.ant-menu-item:hover .myIcon {
    transition: border-color 0.3s;
    fill: var(--defaultPrimaryColor);
  }

  /deep/.ant-menu-item-selected .myIcon {
    transition: 0.3s;
    fill: var(--defaultPrimaryColor);
  }

  .layout-content {
    height: 100%;
    background-color: #ffffff;
    overflow: auto;
  }
  .layout-footer {
    // height: 10%;
    background-color: #ffffff;
    // background-image:url("http://p2.music.126.net/QD_pdnqzF0ix1KaQcPfZWA==/109951166503956880.jpg?param=500y500");
    background-repeat: no-repeat;
    background-size: auto;
    position: relative;
    padding: 15px 20px 15px;
    border-top: 1px solid #e8eaec;
  }
}
</style>
